<template>
  <div>
    <div class="header">
      <a @click="backMethod">
        <i class="el-icon-arrow-left" style="font-size: 20px; color:white;margin-right: 20px;">返回</i>
      </a>
    </div>
    <div class="main">
      <!-- 收货地址 -->
      <div style="">
        <a @click="choiceAddress" style="border-bottom: 1px solid black;width: 100%;height: 20px;display: flex;flex-direction: row-reverse;box-sizing: border-box;padding: 20px;align-items: center;">选择收货地址>>></a>
      </div>
      <div style="width: 100%;box-sizing: border-box;padding: 10px 20px;text-align: left;border-bottom: 1px solid black;">
        <div style="display: flex;font-size: 17px;justify-content: space-between;">
          <div>收货人:<span>{{this.currAddress.consigneeName}}</span></div>
          <div>联系方式:<span>{{this.currAddress.phoneNum}}</span></div>
        </div>
        <div style="display: inline-block;margin-top: 10px;">收货地址:{{this.currAddress.address}}</div>
      </div>
      <!-- 购物车列表 -->
      <div v-for="cartItem in confirmVo.cartItem" :key="cartItem.goodsId" style="box-sizing: border-box;padding: 15px 0;">
        <div style="background-color: #e8e8e8;box-sizing: border-box;padding: 12px 17px;display: flex;height: 100px;margin: 0 20px;">
          <div style="border-radius: 5px;">
            <img :src="cartItem.goodsImg" style="width: 100%;height: 100%;">
          </div>
          <div style="flex: 1;display: flex;box-sizing: border-box;padding-left: 10px;">
            <div style="display: flex;flex: 1;text-align: left;flex-direction: column;">
              <h3 style="display: block;flex: 1;width: 100%;">{{cartItem.goodsName}}</h3>
              <span style="display: inline-block;width: 100%;color: #898989;">￥{{cartItem.price}}.00</span>
            </div>
            <div style="align-items: center;display: flex;color: #898989;">x{{cartItem.count}}</div>
          </div>
        </div>
        <div style="height: 50px;border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;margin-top: 10px;
        align-items: center;display: flex;flex-direction: row-reverse;box-sizing: border-box;padding: 0 20px;">
          <div style="font-size: 20px;">小计:<span style="color: #e7423e;">￥{{cartItem.totalPrice}}.00</span></div>
        </div>
      </div>

      <!-- 应付结算栏 -->
      <div style="display: flex;position: fixed;bottom: 0;align-items: center;width: 100%;height: 55px;border-top: 1px solid #e0e0e0;">
        <div style="font-size: 20px;flex: 1;text-align: left;box-sizing: border-box;padding-left: 20px;height: 100%;display: flex;align-items: center;">应付:<span style="color: #e7423e;">￥{{confirmVo.totalAmount}}.00</span></div>
        <el-button style="border-radius: 0;background-color: #732707;height: 100%;color: #fff;" @click="payDialogVisible = true;">提交订单</el-button>
      </div>
    </div>

    <!-- 地址选择 -->
    <el-drawer
      title="选择你的地址"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"  size="50%" >
      <div v-for="addr in address" :key="addr.consigneeId" style="width: 100%;display: flex;">
        <el-radio v-model="currAddress" :label="addr" @click="this.drawer=false" style="width: 100%;display: flex;align-items: center;border-top: 1px solid black;">
          <div style="box-sizing: border-box;padding: 10px 0;text-align: left;">
            <span style="font-size: 20px;">{{addr.consigneeName}}</span>
            <span style="font-size: 20px;">{{addr.phoneNum}}</span>
            <p style="font-size: 20px;">{{addr.address}}</p>
          </div>
        </el-radio>
      </div>
    </el-drawer>

    <el-dialog
      title="准备跳转到支付页面..."
      :visible.sync="payDialogVisible"
      :before-close="closeDialog" class="goPayPage" width="80%" top="30vh">
      <h2>正在准备使用支付宝支付中</h2>
      <span slot="footer" class="dialog-footer">
        <el-button @click="payDialogVisible = false">再等等</el-button>
        <el-button type="primary" @click.native="submitOrder()">去支付</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  // import AlipaySdk from "alipay-sdk";
  // const AlipaySdk = require('alipay-sdk').default; // 引入 SDK
  export default{
    data() {
      return{
        address:[],
        confirmVo:{},
        currAddress:{},

        drawer: false,
        direction: 'btt',

        payDialogVisible:false,
        orderSn:"",
      }
    },
    mounted() {
      this.renderMethod()
    },
    methods:{
      handleClose(done) {
        done();
      },

      closeDialog(){
        this.payDialogVisible = false;
        this.$message({
          message: "已取消支付",
          type: "info",
        })
      },

      choiceAddress(){
        this.drawer = true;
      },

      //返回方法
      backMethod(){
        let lastPage = sessionStorage.getItem("lastPage");
        if(lastPage!=null){
          this.$router.push({
            path: lastPage
          });
        }else{
          this.$router.push({
            path: '/home/shopCar'
          });
        }
      },
      renderMethod(){
        var self = this
        var user = JSON.parse(sessionStorage.getItem("visitor"));
        //渲染收货地址列表
        if(user!=null){
          //设置访问后台cookie数据
          this.$cookies.set("userCode",user.userCode);
          this.$cookies.set("token",user.token);

          this.queryMyAddress()

          //清除相关cookie
          this.$cookies.remove("userCode");
          this.$cookies.remove("token");
        }
      },
      //查询登录用户的相关信息
      queryMyAddress(userCode){
        var self = this
        this.$http.post('/api/CakeShop/OrderManage/confirmOrder').then((res)=>{
          if(res.data.code == 200){
            // console.log(res.data)
            //渲染登录用户的收货地址
            this.address = res.data.confirmVo.address
            // console.log(res.data.confirmVo.address)
            //默认选择地址
            this.currAddress = res.data.confirmVo.address[0]
            //渲染所有需要购买的商品列表
            this.confirmVo = res.data.confirmVo.cartVo
            //渲染购买订单的token
            this.orderToken = res.data.confirmVo.orderToken

            //空页面判断跳转
            if(this.confirmVo.cartItem == null || this.confirmVo.cartItem.length == 0){
              this.$message({
                message: "想要购买的商品没货了，去看看别的商品吧",
              	type: "error",
              	onClose: function() {
                  // console.log(sessionStorage.getItem("lastPage"))
              		self.$router.push(sessionStorage.getItem("lastPage"))
              	},
              });
            }
          }
        })
      },

      //提交订单
      submitOrder(){
        console.log('提交订单');
        var self = this;
        var user = JSON.parse(sessionStorage.getItem("visitor"));
        //渲染收货地址列表
        if(user!=null){
          //设置访问后台cookie数据
          this.$cookies.set("userCode",user.userCode);
          this.$cookies.set("token",user.token);

          console.log()

          if(this.confirmVo.cartItem == null || this.confirmVo.cartItem.length == 0){
            self.$message({
              message: "无法提交空表单",
            	type: "error",
            	onClose: function() {
            		return;
            	},
            });
          }

          //执行订单支付方法
          this.$http.post('/api/CakeShop/OrderManage/submitOrder',{
            consigneeId:this.currAddress.consigneeId,
            token:this.orderToken,
            payPrice:this.confirmVo.totalAmount
          }).then((res)=>{
            console.log(res)
            if(res.data.code == 200){
              self.orderSn = res.data.orderSn;
              self.goPayPage()
            }else{
              console.log(res.data.msg);
            }
          })
          //清除相关cookie
          this.$cookies.remove("userCode");
          this.$cookies.remove("token");
        }
      },

      //跳转到支付宝支付页
      goPayPage(){
        this.$http.get('/api/CakeShop/payOrder?orderSn='+this.orderSn)
        .then((res)=>{
          if(res.data.code == 200){
            console.log(res)
            // AlipaySdk.exec()
            const div = document.createElement('div')
            div.innerHTML = res.data.aliPayUrl
            console.log(res.data.aliPayUrl)
            document.body.appendChild(div)
            document.forms[0].submit()
          }
        })
      },
    }
  }
</script>

<style scoped>
  .header{
    display: flex;
    position: fixed;
    top: 0;
    padding-left: 30px;
    width: 100%;
    height: 80px !important;
    line-height: 80px;
    background-color: #732707;
  }
  .main{
    box-sizing: border-box;
    padding-top: 80px;
  }
  .goPayPage .dialog-footer{
    display: flex;
    justify-content: space-around;
  }
</style>
